<template>
     <el-container>
    <el-header style="text-align: left;flex-direction: row;display: flex;align-items: center; font-size: 12px">
        <el-form :inline="true" style="display: flex;flex-direction: row; margin-left: 10px;" class="demo-form-inline">


            <el-form-item>
                <el-input v-model="serch" placeholder="请输入搜索设备名称"></el-input>
                <el-button icon="el-icon-search"   circle ></el-button>
            </el-form-item>
        </el-form>

    </el-header>
    
    <el-main>
      <el-table :data="tableData" :cell-style="serchclick">
        <el-table-column label="序号" width="100">
          <template slot-scope="scope">
            {{scope.$index+1}} 
          </template>
        </el-table-column>
        <el-table-column prop="imei" label="IMEI">
        </el-table-column>
        <el-table-column
            prop="username"
            label="用户名"
            :filters="userFilter"
            :filter-method="filterUser"
        >
        </el-table-column>
        <el-table-column prop="project_name" label="所属项目"
          :filters="projFilter"
            :filter-method="filterProj"
        >
        </el-table-column>
        
        <el-table-column prop="updated_at" label="最新请求时间" >
        </el-table-column>
        <el-table-column prop="version" label="最新固件版本">
        </el-table-column>
        <el-table-column prop="configversion" fixed="right" label="配置固件版本">
          <el-button type="text" size="small">配置</el-button>
        </el-table-column>
      </el-table>
    </el-main>
     </el-container>
</template>

<script>

    import {Axios} from "../../../static/util";

    export default {
        name:"dlist",
        
        props: ['filter'],
        methods: {
           serchclick({row,colnum,rowIndex,columnIndex}){
            //   console.log(1,this.serch,row['productname']);
               
                
            },
            filterUser(value, row){
              return row.username === value;
            },
            filterProj(value,row){
                return row.project_name === value;
            }
        },
        data() {
            
            return {
                tableData: [],
                serch: '',
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '80px',
                timer: null,
                dialog: false,
                loading: false,

                userFilter:[],
                projFilter:[],

            }
        },
        created(){
            let self = this;
            console.log(self.filter);
            Axios(
              'get',
              'http://127.0.0.1:5000/device',
              {},
              (res)=>{
              if (res.data.code != "200"){
                  this.$message.warning('错误:'+res.data.msg);
                  
              }else{
                if(self.filter !== ''  ){
                   res.data.data.forEach(item =>{
                      if(item.project_name === self.filter){
                        self.tableData.push(item);
                      }
                   });     
                }else{
                  this.tableData = res.data.data;
                }
                
                 let ary = [];
                  let ary2 = [];
                  this.tableData.forEach(item => {
                    
                    if(ary.indexOf(item.username) == -1){
                      self.userFilter.push({
                        text:item.username,
                        value:item.username
                      });
                      ary.push(item.username);
                    }
                    if(ary2.indexOf(item.project_name) == -1){
                      self.projFilter.push({
                        text:item.project_name,
                        value:item.project_name
                      });
                      ary2.push(item.project_name);
                    }
                  });
              }
                
            });
            

           

        },

    }
</script>

<style>

 .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
    
  }
  
  .el-aside {
    color: #333;
  }
  .el-form{
     flex: 1;
  }
  .el-form-item{
   flex: 1;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
   
  }
  .el-form-item__content{
    width: 100%;
     display: flex !important;
    flex-direction: row;
    align-items: center;

  }
  .el-input{
    width: 50%;
    margin-right: 10px;
  }

</style>
